<template>
   <div class="cate">
    <!-- 左侧  -->
   <div class="left">
     <!-- 3.遍历左侧 -->
     <!-- 4.使用动态类名实现选中的样式 -->
     <div v-for="(item,index) in arr" :key="item.id" :class="index==n?'active':''" @click="n=index">{{item.catename}}</div>
   </div>
   <!-- 右侧 -->
   <div class="right">
     <!-- 一个块 -->
     <!-- 5.展示列表数据  -->
     <div class="box" v-if="arr.length>0">
       <h3>{{arr[n].catename}}</h3>
       <div class="content" v-if="arr[n].children">
         <!-- 6.跳转到分类列表页的时候，需要再多传一个type给list,让list根据这个值判断是1级分类还是2级分类 -->
         <div class="item" v-for="i in arr[n].children" :key="i.id" @click="$router.push('/list?id='+i.id+'&type=2')">
           <img :src="$pre+i.img" alt="">
           <div>{{i.catename}}</div>
         </div>
       </div>

       <div class="content" v-else>
           
          <van-empty  description="暂无数据" />
       </div>
     </div>
   </div>
  </div>
</template>

<script>
import {reqCates} from "../../http/http"
export default {
  data(){
    return {
      arr:[],
      n:0
    }
  },
  mounted(){
    reqCates().then(res=>{
      this.arr=res.data.list
    })
  }
}
</script>

<style scoped>
img{
  width: 2rem;
  height: 2rem;
}

.cate{
  width: 100vw;
  display: flex;
  min-height: 100vh;
  

}
.left{
  width: 2rem;
  border-right: 0.01rem solid #ccc;
}
.left div{
  text-align: center;
  line-height: 0.8rem;
}
.left .active{
  color: #ff4400;
}
.right{
  flex: 1;
  background: #f4f4f4;
  
}
.box{
   margin: 0.2rem; 
   background: #fff;
   overflow: hidden;
}
.box h3{
  font-weight: 900;
  font-size: 0.3rem;
  margin: 0.2rem;
}
.box .item{
  width: 50%;
  float: left;
  height: 3rem;
  padding:0px 0.2rem;
  box-sizing: border-box;
  text-align: center;
}
.item img{
  width: 80%;
  height: 1.5rem;
  border-radius: 50%;
}

</style>